<template>
    <div class="xunjingwendao order-list">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <!-- 顶部导航 -->
            <div class="nav-bar">


                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in navItems" :key="index" :label="item.name" :name="item.name"
                        @click="changeTab(index, item.status)"></el-tab-pane>

                </el-tabs>
            </div>

            <!-- 订单列表 -->


            <div class="order-item" v-for="(order, index) in orderList" :key="index">
                <div class="order-header">
                    <span class="order-number">订单号: {{ order.orderNo }}</span>
                    <!-- <span :class="['order-status', order.statusClass]">{{ order.status }}</span> -->
                    <span v-if="order.status == 0" class="status-pending">待付款</span>
                    <span v-if="order.status == 1" class="status-processing">待发货</span>
                    <span v-if="order.status == 2" class="status-processing">待收货</span>
                    <span v-if="order.status == 3" class="status-completed">已完成</span>
                    <span v-if="order.status == 5" class="yiguanbi">已关闭</span>
                </div>
                <div class="order-content" v-for="(item, index1) in order.listOrderItem">
                    <img :src="item.picUrl" class="product-image" />
                    <div class="order-details">
                        <div class="" style="display: flex;justify-content: space-between;">
                            <span class="product-name">{{ item.spuName }}</span>
                            <div class="" v-if="order.status == 1 || order.status == 2">
                                <el-button size="mini" v-if="item.status == 0" type="warning"
                                    @click="tuikuan(item.id, $event)" class="pay-button">退款</el-button>
                                <el-button size="mini" v-if="item.status == 1" type="warning"
                                    class="pay-button">退款中</el-button>
                                <el-button size="mini" v-if="item.status == 2" type="warning"
                                    class="pay-button">拒绝退款</el-button>
                                <el-button size="mini" v-if="item.status == 3" type="warning"
                                    class="pay-button">已退款</el-button>
                            </div>

                        </div>

                        <span class="order-date">下单时间: {{ item.createTime }}</span>
                    </div>
                </div>
                <div class="order-footer">

                    <div class="action-button" v-if="order.status == 0">
                        <el-button size="mini" type="primary" class="pay-button"
                            @click="pay(order.id, order.paymentPrice, order.userMessage)">立即支付</el-button>
                        <el-button size="mini" type="info" @click="qxdd(order.id)" class="pay-button">取消订单</el-button>
                    </div>
                    <div class="action-button" v-if="order.status == 2">
                        <el-button size="mini" type="success" @click="qush(order.id)"
                            class="pay-button">确认收货</el-button>

                    </div>
                    <div class="action-button" v-if="order.status == 5">
                        <el-button size="mini" type="error" @click="delOrder(order.id)"
                            class="pay-button">删除订单</el-button>
                    </div>
                    <div class="action-button">
                        <el-button size="mini" plain type="primary" @click="details(order.id)"
                            class="pay-button">订单详情</el-button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>

import {
    orderinfoDetails, orderinfoList, orderinfoDel,
    orderinfoTake,
    orderinfoReceive, refunds
} from '@/api/index'
export default {
    computed: {
        currentPath() {
            return '/shop'; // 获取当前路由路径
        },
    },
    data() {
        return {
            navItems: [
                { name: '全部', status: '' },
                { name: '待支付', status: 0 },
                { name: '待发货', status: 1 },
                { name: '待收货', status: 2 },
                { name: '已完成', status: 3 },
                { name: '已关闭', status: 5 },
            ],
            currentTab: 0,
            activeName: '全部',
            orderList: [],
            status: "",

        }
    },
    methods: {
        tuikuan(id, event) {

            let self = this
            this.$confirm('确认退款吗?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                refunds({ id: id }).then((res) => {
                    if (res.code == 200) {

                        this.$message({
                            type: 'success',
                            message: res.msg,
                        })
                        self.orderinfoListFn(self.status)
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            })



        },
        changeTab(index, status) {
            this.currentTab = index;
            this.status = status;
            this.orderinfoListFn(status);
        },
        pay(id, price, userMessage) {
            uni.navigateTo({
                url: "/pages/pay/payment/payment?id=" + id + '&price=' + price + '&userMessage=' + userMessage + '&type=order'
            })
        },
        qush(id) {
            orderinfoReceive(id).then((res) => {
                if (res.code == 200) {

                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                    this.orderinfoListFn(this.status)

                } else {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                }
            })
        },
        qxdd(id) {
            orderinfoTake(id).then((res) => {
                if (res.code == 200) {

                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                    this.orderinfoListFn(this.status)

                } else {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                }
            })
        },
        delOrder(id) {
            orderinfoDel(id).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                    this.orderinfoListFn(this.status)

                } else {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                }
            })
        },
        details(id) {
            this.$router.push({
                path: '/shopOrderDetails',
                query: { id: id }
            })
        },
        handleClick(tab, event) {

            this.status = tab.index;

            this.orderinfoListFn(tab.index);
        },
        orderinfoListFn(status) {
            let data = {
                pageNum: 1, pageSize: 1000
            }
            if (status != "") {
                data['status'] = status;
            }
            orderinfoList(data).then((res) => {
                console.log(res, 'listorder')
                if (res.code == 200) {
                    this.orderList = res.data.records;

                } else {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                }
            })
        },

    },


    mounted() {
        this.orderinfoListFn(this.status)
    }
}
</script>


<style lang="scss" scoped>
.order-list {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;





    .order-item {

        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f5f5f5;
        background: #fff;

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;


            .status-pending {

                color: #ffa500;
            }

            .status-processing {

                color: #1890ff;
            }

            .status-completed {

                color: #52c41a;
            }

            .yiguanbi {
                color: red;
            }


        }

        .order-number {
            font-size: 14px;
            color: #666;
        }


        .order-content {
            display: flex;
            margin-bottom: 20px;

            .order-details {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .product-name {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                }

                .order-date {
                    font-size: 13px;
                    color: #999;
                }

            }

            .product-image {
                width: 129px;
                height: 100px;
                border-radius: 10px;
                margin-right: 20px;
            }

        }

        .order-footer {
            display: flex;
            align-items: center;
            justify-content: end;

            .action-button {

                display: flex;

                .el-button {
                    margin-left: 10px;
                }


            }

            .order-amount {
                font-size: 16px;
                font-weight: bold;
                color: #ff6b6b;
            }

        }

    }

}
</style>